<template>
  <div class="container">
    <!-- 搜索和添加 -->
    <div class="card">
      <div class="search-add">
        <input 
          class="input search-input" 
          v-model="searchText" 
          placeholder="搜索记事本..."
          @input="searchNotes"
        />
        <button class="btn btn-primary" @click="showAddModal = true">新建笔记</button>
      </div>
    </div>

    <!-- 记事本列表 -->
    <div class="card">
      <div class="section-title">
        我的笔记 ({{ filteredNotes.length }})
      </div>
      <div v-if="filteredNotes.length === 0" class="empty">
        <div class="empty-icon">📓</div>
        <div>{{ searchText ? '没有找到相关笔记' : '还没有笔记，点击上方按钮创建第一个笔记吧' }}</div>
      </div>
      <div v-else>
        <div 
          class="note-item" 
          v-for="note in filteredNotes" 
          :key="note.id"
          @click="openNote(note)"
        >
          <div class="note-header">
            <div class="note-title">{{ note.title }}</div>
            <div class="note-actions">
              <button class="btn btn-small" @click.stop="editNote(note)">编辑</button>
              <button class="btn btn-danger btn-small" @click.stop="deleteNote(note.id)">删除</button>
            </div>
          </div>
          <div class="note-content-preview">{{ getPreview(note.content) }}</div>
          <div class="note-time">
            <div>创建时间: {{ note.createTime }}</div>
            <div v-if="note.updateTime !== note.createTime">更新时间: {{ note.updateTime }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加/编辑笔记模态框 -->
    <div class="modal" v-if="showAddModal || showEditModal">
      <div class="modal-content">
        <div class="modal-header">
          {{ showEditModal ? '编辑笔记' : '新建笔记' }}
        </div>
        <div class="modal-body">
          <input 
            class="input" 
            v-model="currentNote.title" 
            placeholder="请输入标题..."
            maxlength="50"
          />
          <textarea 
            class="textarea" 
            v-model="currentNote.content" 
            placeholder="请输入内容..."
            maxlength="2000"
          />
          <div class="char-count">
            内容字数: {{ currentNote.content.length }}/2000
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn" @click="closeModal">取消</button>
          <button class="btn btn-primary" @click="saveNote">保存</button>
        </div>
      </div>
    </div>

    <!-- 查看笔记模态框 -->
    <div class="modal" v-if="showViewModal">
      <div class="modal-content view-modal">
        <div class="modal-header">
          {{ currentNote.title }}
        </div>
        <div class="modal-body view-body">
          <div class="note-content-full">{{ currentNote.content }}</div>
          <div class="note-time">
            <div>创建时间: {{ currentNote.createTime }}</div>
            <div v-if="currentNote.updateTime !== currentNote.createTime">
              更新时间: {{ currentNote.updateTime }}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn" @click="closeModal">关闭</button>
          <button class="btn btn-primary" @click="editNote(currentNote)">编辑</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      searchText: '',
      showAddModal: false,
      showEditModal: false,
      showViewModal: false,
      currentNote: {
        id: null,
        title: '',
        content: '',
        createTime: '',
        updateTime: ''
      }
    }
  },
  computed: {
    ...mapState(['notes']),
    filteredNotes() {
      if (!this.searchText.trim()) {
        return this.notes
      }
      const search = this.searchText.toLowerCase()
      return this.notes.filter(note => 
        note.title.toLowerCase().includes(search) ||
        note.content.toLowerCase().includes(search)
      )
    }
  },
  methods: {
    ...mapActions(['addNote', 'updateNote', 'deleteNote']),
    
    getPreview(content) {
      const preview = content.replace(/\n/g, ' ').trim()
      return preview.length > 100 ? preview.substring(0, 100) + '...' : preview
    },
    
    searchNotes() {
      // 搜索逻辑已通过计算属性实现
    },
    
    openNote(note) {
      this.currentNote = { ...note }
      this.showViewModal = true
    },
    
    editNote(note) {
      this.currentNote = { ...note }
      this.showEditModal = true
      this.showViewModal = false
    },
    
    saveNote() {
      if (!this.currentNote.title.trim()) {
        uni.showToast({
          title: '请输入标题',
          icon: 'none'
        })
        return
      }
      
      if (!this.currentNote.content.trim()) {
        uni.showToast({
          title: '请输入内容',
          icon: 'none'
        })
        return
      }
      
      const now = new Date().toLocaleString('zh-CN')
      
      if (this.showEditModal) {
        // 编辑模式
        const updatedNote = {
          ...this.currentNote,
          updateTime: now
        }
        this.updateNote(updatedNote)
        uni.showToast({
          title: '更新成功',
          icon: 'success'
        })
      } else {
        // 新建模式
        const newNote = {
          id: Date.now(),
          title: this.currentNote.title.trim(),
          content: this.currentNote.content.trim(),
          createTime: now,
          updateTime: now
        }
        this.addNote(newNote)
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        })
      }
      
      this.closeModal()
    },
    
    deleteNote(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这个笔记吗？删除后无法恢复。',
        success: (res) => {
          if (res.confirm) {
            this.$store.dispatch('deleteNote', id)
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },
    
    closeModal() {
      this.showAddModal = false
      this.showEditModal = false
      this.showViewModal = false
      this.currentNote = {
        id: null,
        title: '',
        content: '',
        createTime: '',
        updateTime: ''
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.search-add {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.search-input {
  flex: 1;
  margin-bottom: 0;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.note-item {
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.note-item:hover {
  background-color: #f8f8f8;
}

.note-item:last-child {
  border-bottom: none;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.note-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.note-actions {
  display: flex;
  gap: 10rpx;
}

.note-content-preview {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.note-time {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
}

.note-content-full {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  white-space: pre-wrap;
  max-height: 600rpx;
  overflow-y: auto;
  margin-bottom: 30rpx;
}

.char-count {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  margin-top: 10rpx;
}

.view-modal .modal-content {
  max-width: 700rpx;
}

.view-body {
  max-height: 70vh;
}

.empty {
  text-align: center;
  padding: 80rpx 20rpx;
  color: #999;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.modal-body {
  margin-bottom: 40rpx;
}

.modal-body input {
  margin-bottom: 20rpx;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}
</style>